<script lang="ts" setup>
import { ref, reactive } from 'vue'
import ReTitle from '@/components/ReTitle/index.vue'
import { hasBtnAuth } from '@/utils/auth'
</script>

<template>
  <div class="p-[20px]">
    <ReTitle
      title="自定义指令"
      tip="此处演示针对不同角色下通过自定义指令进行按钮权限控制"
    >
      <el-form>
        <el-form-item>
          <el-button v-btn-auth="'PermissionButton:add'" type="primary">
            拥有 'PermissionButton' 菜单且operations包含 'add'可见
          </el-button>
          <el-button v-btn-auth="'PermissionButton:edit'" type="warning">
            拥有 'PermissionButton' 菜单且operations包含 'edit'可见
          </el-button>
          <el-button v-btn-auth="'PermissionButton:delete'" type="danger">
            拥有 'PermissionButton' 菜单且operations包含 'delete'可见
          </el-button>
        </el-form-item>
      </el-form>
    </ReTitle>

    <ReTitle
      title="权限函数"
      tip="此处演示针对不同角色下通过权限函数进行按钮权限控制"
    >
      <el-form>
        <el-form-item>
          <el-button v-if="hasBtnAuth('PermissionButton:add')" type="primary">
            拥有 'PermissionButton' 菜单且operations包含 'add'可见
          </el-button>
          <el-button v-if="hasBtnAuth('PermissionButton:edit')" type="warning">
            拥有 'PermissionButton' 菜单且operations包含 'edit'可见
          </el-button>
          <el-button v-if="hasBtnAuth('PermissionButton:delete')" type="danger">
            拥有 'PermissionButton' 菜单且operations包含 'delete'可见
          </el-button>
        </el-form-item>
      </el-form>
    </ReTitle>
  </div>
</template>
